<template>
  <div class="box">
    <!-- <ul class="screenTittle">
      <li @click="clickSongs">歌曲</li>
      <span></span>
      <li @click="clickLyric">歌词</li>
    </ul>
    <component :is="componentN"
               :playMusice='playMusice'
               :pList='lyric'
               :audioDom='audioDom'
               :changeTime='changeTime'
    ></component> -->
  </div>
</template>
<script>
// import Songs from "@/components/Songs";
// import Lyric from "@/components/Lyric";
export default {
  name: "FullScreen",
  data() {
    return {
      componentN:'songs',
      playMusice:"",
      lyric: [],
      audioDom:null,
      // songMenu:[],
    };
  },
  components: {
    // Songs,
    // Lyric
  },
  created(){
    this.playMusice = this.$route.params.musicname;
    this.audioDom = this.$route.params.audioDom;
    this.changeTime = this.$route.params.changeTime;
    // console.log("this.===>",this.pLyric);
    // console.log(this.$route.params);
    },
  methods:{
    clickSongs(){
      this.componentN='Songs'
    },
    clickLyric(){
      this.componentN='Lyric'
    }
  },
   watch: {
    playMusice(value) {
        // console.log(value.id);
      this.$http
        .get("http://music.kele8.cn/lyric", {
          params: {
            id: value.id,
          },
        })
        .then((d) => {
          // console.log(d);
          let lyric = d.data.lrc.lyric;
          // console.log(lyric);
          //根据换行符切割字符串
          let arr = lyric.split("\n");
          // console.log(arr);
          //弹出最后一个空格 最后符号 \n
          arr.pop();
          //正则里面的[] 表示“或”的意思
          let reg = /\[(\d+):(\d+\.\d+)\](.*)/;
          for (let i = 0; i < arr.length; i++) {
            let regex = new RegExp(reg);
            if (regex.test(arr[i])) {
              let item = {
                time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
                lyric: RegExp.$3,
              };
              this.lyric.push(item);
            }
          }
        });
    },
    
    changeTime(value) {
      console.log('----',value);
      // let val = e.target.value;
      // let player = this.$refs.player;
      // let ctime = (val / 100) * this.duration;
      // console.log(ctime);
      // player.currentTime = ctime;
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: skyblue;
  top: 0;
  position: fixed;
  padding-top: 10px;
  z-index: 50;
  .screenTittle {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    li {
      margin: 0 5px;
      font-size: 14px;
      a {
        color: #999;
      }
    }
    span {
      width: 1px;
      height: 8px;
      background-color: #ccc;
    }
  }
}
</style>